import React, { Component } from 'react'
import "./Cart.scss";
import emptyCart from "../../assets/empty-cart.png";
import { NavBar } from "antd-mobile";
export default class Cart extends Component {
  state = {
    carts: []
  }
  // 获取本地缓存中购物车数据
  componentDidMount() {
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str || "[]");
    this.setState({
      carts
    })
  }
  handleclick = () => {
    console.log(this.state.carts.length)
    console.log(this.state.carts.num)
  }

  render() {
    return (
      <div className="yg-cart">
        <div className="yg-cart-nav">
          <NavBar className="cart-content-nav">优购商城</NavBar>
        </div>
        {
          Boolean(this.state.carts.length) ? (
            <div className="yg-cart-content" >
              {/* 购物车列表 */}
              <div className="cart-content-list">
                {this.state.carts.map((v, index) => {
                  return (
                    <div className="content-list-item" key={v.goods_id}>
                      <div className="list-item-left">
                        <i className="iconfont icon-yuanquan"></i>
                      </div>
                      <div className="list-item-mid">
                        <img src={v.goods_small_logo} alt="" />
                      </div>
                      <div className="list-item-right">
                        <div className="right-top">
                          <div className="right-top-title">
                            {v.goods_name}
                          </div>
                        </div>
                        <div className="right-bottom">
                          <div className="right-bottom-left">
                            ￥{v.goods_price}
                          </div>
                          <div className="right-bottom-right">
                            <i className="iconfont icon-iconjian"></i>
                            <span className="num">{v.num}</span>
                            <i className="iconfont icon-jia"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
              {/* 结算栏 */}
              <div className="cart-content-borttom">
                <div className="all-checked">
                  <i className="iconfont icon-yuanquan"></i>
                  <span className="allChecked">全选</span>
                </div>
                <div className="totalPrice">
                  <span className="oSum">合计</span>
                  <span className="oPrice">￥63773</span>
                </div>
                <div className="pay">
                  <span className="oPay">去结算(1)</span>
                </div>
              </div>
            </div>
          ) : (
              <div className="yg-cart-empty" >
                <img src={emptyCart} className="cart-empty-img" alt="" />
                <h3 className="empty-text">
                  购物车空空如也<a href="#/category">去逛逛</a>
                </h3>
              </div>)
        }
      </div>
    )
  }
}
